<!--Copyright (c) 2020 Orca Data Technology(Xi'an)CO.LTD. All rights reserved. * Create by Jisr on 2021/1/20 5:35 下午-->
<template>
    <fragment>
        <div class="header">
            <div class="url-view" :style="{ borderBottomLeftRadius: isMethodSelectActive ? '0px' : '3px' }">
                <div
                    class="method-select"
                    @click="startSelectMethod"
                    :style="{ borderBottomLeftRadius: isMethodSelectActive ? '0px' : '3px' }"
                >
                    <span :style="{ color: colorMap[crtMethod.toLowerCase()] }">{{ crtMethod }}</span>
                    <Icon
                        type="ios-arrow-down"
                        :style="{ transform: `rotate(${isMethodSelectActive ? 180 : 0}deg)` }"
                    />
                    <div class="select-wrapper" v-if="isMethodSelectActive">
                        <div
                            v-for="(method, index) in urlMethods"
                            :key="index"
                            class="method-item"
                            @click.stop="endSelectMethod(index)"
                        >
                            <span>{{ method.label }}</span>
                        </div>
                    </div>
                </div>
                <div class="input-view">
                    <label>
                        <input type="text" class="input" v-model="url" />
                    </label>
                </div>
            </div>
            <div class="send-btn" @click="sendRequest">
                <span>Send</span>
            </div>
        </div>
        <div class="body">
            <div class="http-label">
                <span class="request-label">Request</span>
                <span class="request-label-split"></span>
            </div>
            <div class="request-view">
                <Tabs v-model="tabActive">
                    <TabPane label="Headers" name="Headers" class="request-param-view">
                        <!--                        <div class="clock">-->
                        <!--                            <div>11</div>-->
                        <!--                            <div>12</div>-->
                        <!--                            <div>1</div>-->
                        <!--                            <div>2</div>-->
                        <!--                            <div>3</div>-->
                        <!--                            <div>4</div>-->
                        <!--                            <div>5</div>-->
                        <!--                            <div>6</div>-->
                        <!--                            <div>7</div>-->
                        <!--                            <div>8</div>-->
                        <!--                            <div>9</div>-->
                        <!--                            <div>10</div>-->
                        <!--                        </div>-->
                    </TabPane>
                    <TabPane label="Body" name="Body" class="request-param-view"> 2 </TabPane>
                </Tabs>
            </div>
            <div class="http-label">
                <span class="response-label">Response</span>
                <span class="response-label-split"></span>
            </div>
            <div class="response-view"></div>
        </div>
    </fragment>
</template>

<script lang="ts">
    import { Component, Vue, Watch } from 'vue-property-decorator';
    import { State, Mutation } from 'vuex-class';
    import moment from 'moment';
    @Component({})
    export default class Debug extends Vue {
        [x: string]: any;
        @State('crtUrl') crtUrl: any;
        @Mutation('updateIsPullHistoryUrlList') updateIsPullHistoryUrlList!: Function;
        @Watch('crtUrl', { immediate: true, deep: true })
        refreshUrl(n: any, o: any) {
            if (n) {
                this.url = n.url;
                this.crtMethod = n.method;
            }
        }
        tabActive = '';
        isMethodSelectActive = false;
        url = '';
        crtMethod = 'GET';
        colorMap: { [key: string]: string } = {
            get: '#45a54a',
            post: '#ca7c3c',
            put: '#2d73b3',
            delete: '#cf2d2d'
        };
        mounted() {
            //
        }
        urlMethods = [
            {
                label: 'GET'
            },
            {
                label: 'POST'
            },
            {
                label: 'PUT'
            },
            {
                label: 'DELETE'
            }
        ];
        public startSelectMethod(): void {
            this.isMethodSelectActive = true;
        }
        public endSelectMethod(index: number): void {
            this.crtMethod = this.urlMethods[index].label;
            this.isMethodSelectActive = false;
        }
        public sendRequest(): void {
            const domainReg = /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i;
            const ipReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):?([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])?/;
            if (domainReg.test(this.url) || ipReg.test(this.url)) {
                //1.写入indexed数据库
                this.$db
                    .onPush('urls', {
                        url: this.url,
                        method: this.crtMethod,
                        useTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                        parent: 'history',
                        env: 'test',
                        menuIndex: 1,
                        docId: '',
                        group: moment().format('YYYY-MM-DD')
                        // group: '2021-01-20'
                        //192.168.101.189:30080/qinhancity-wechat/v1.0.0/information/search
                    })
                    .then(() => {
                        //2.更新aside数据
                        this.updateIsPullHistoryUrlList();
                    });
                //3.发送请求到中间件
            }
        }
    }
</script>

<style lang="less" scoped src="./debug.less"></style>
